<template>
	<div class="gm_headerbox">
		
		<el-menu 
		  class="headNameMenu"
		  mode="horizontal">
		    <el-submenu index="1">
			    <template slot="title">{{userName}}</template>
			    <el-menu-item index="1-1" @click="pMsg">个人信息</el-menu-item>
			    <el-menu-item index="1-2" @click="outBtn">退出</el-menu-item>
			</el-submenu>
		</el-menu>
		<el-menu 
			v-if="headerNoroleId"
			mode="horizontal">	
			<el-menu-item index="1" @click="phoneSwitchBusyFree">{{paused}}</el-menu-item>
		</el-menu>
		<el-menu
			v-if="headerNoroleId">
			<el-menu-item index="1" class="onCallLine">
			  	<el-input
				  placeholder="请输入拨打电话"
				  v-model="callPhone"
				  clearable
				  :class="redBorder ? 'redBorder' : '' " 
				  @blur="blurEvent">
	    		  <el-button slot="append" icon="el-icon-phone-outline" @click="onCallOut"></el-button>
				</el-input>
	          <span class="redTips" v-if="redBorder">请重新输入正确的手机号码</span>
			</el-menu-item>
		</el-menu>
		
		
	</div>
	
</template>
<script>
import bus from '@/api/bus'
import {
	pxbPhoneSwitch, 
	pxbPhoneState,
	pxbPhoneCallback,
	pxbPhoneQuitList} from '@/api'
	export default {
    data() {
      return {
       redBorder:0,//校验为手机号
	   paused:'置忙',
	   callPhone:'',
	   headerNoroleId:'',//判断超管头部内容不显示
	   roleId:'',
	   userName:''
      };
    },
    created(){
		//setInterval(方法,间隔秒数)方法不要带()在methods定义个函数,否则参数传不进去
		//mounted其他的生命周期内写方法会持续调用,不需要setInterval调用
		let roleIdNumber = JSON.parse(sessionStorage.getItem('userInfo')).roleId;
		this.roleId = roleIdNumber
		if(this.roleId == 1 || this.roleId == 2|| this.roleId == 4){
		setInterval(this.searchPhoneState, 1000);
		this.headerNoroleId =1  //判断是否显示头部内容
		}else if(this.roleId == 3){
		this.headerNoroleId =0
		}
		this.userName =JSON.parse(sessionStorage.getItem('userInfo')).name;
	},
	mounted() { //判断置闲置忙的值,修改头部置闲置忙的文字
		let pausedCode = sessionStorage.getItem('paused');
		if(pausedCode == 0){
			this.paused = "置忙"
		}else if(pausedCode == 1){
			this.paused ="置闲"
		}
	},
    methods: {
    	blurEvent(){//字段的校验,失去焦点时调用,提示信息显示3s消失---无法用refs进行校验的字段,输入框上添加 :class="redBorder1 ? 'redBorder' : '' " @blur="blurEvent" 行内添加<span class="redTips" v-if="redBorder1">输入有误,请重新输入</span>
  			//let regPhone = /(^([0-9]{3,4}-)?[0-9]{7,8})$|(13[0-9]{9})/;
  			let regPhone =/^[0-9]*$/
  			if(this.callPhone !=''){
  				if(regPhone.test(this.callPhone)){
  					this.redBorder=0
  				}else{
  					this.callPhone=''
  					this.redBorder=1
  					setTimeout(() =>{this.redBorder=0; }, 3000);
  				}
  			}
  		},
		pMsg () {
			this.$router.push({
				path: '/home'
			})
		},
		outBtn() {
			if(this.roleId == 3){ //超管退出时不需要退出队列,没有绑定分机
				sessionStorage.removeItem('userInfo')
				sessionStorage.removeItem('dictionaryValue')
				sessionStorage.removeItem('queue')
				sessionStorage.removeItem('paused')
				sessionStorage.removeItem('device')
				sessionStorage.removeItem('phoneAmount')
				sessionStorage.removeItem('equiLoginValue')
				sessionStorage.removeItem('account')
				this.$router.push({
					path: '/'
				})
			}else if(this.roleId ==1|| this.roleId == 2|| this.roleId == 4){//坐席相关人需要绑定分机,退出时需退出队列
				let staffNumber = JSON.parse(sessionStorage.getItem('userInfo')).userId; 
				let params = { //分机退出队列
					device: sessionStorage.getItem('device'),
					staff: staffNumber
				}
				this.pxbPhoneQuitList(params)
				clearInterval(this.searchPhoneState) //清除时时状态查询定时器
				sessionStorage.removeItem('userInfo')
				sessionStorage.removeItem('dictionaryValue')
				sessionStorage.removeItem('queue')
				sessionStorage.removeItem('paused')
				sessionStorage.removeItem('device')
				sessionStorage.removeItem('phoneAmount')
				sessionStorage.removeItem('equiLoginValue')
				sessionStorage.removeItem('account')
			}
		},
      	phoneState (params) {//调入分机状态查询接口
			pxbPhoneState (params).then(res => {
				let code = res.data.code;
				let data = res.data;
				if(code == 0){
					//console.log(data)
					sessionStorage.setItem('paused',data.paused);
					if(data.paused == 0){ //可以打印出设备的工作状态闲/忙
						// console.log("设备置闲");
					}else if(data.paused == 1){
						// console.log('设备置忙');
					}else if(data.paused == 3){
						// console.log('未加入队列');
					}
					if(data.state ==''){
						//console.log('分机空闲')
					}else if(data.state == 'Up'){
						//console.log('通话中')
					}else if(data.state =='Ringing'){//唤起弹屏页面,传入呼叫号码
						this.$router.push({
							path: '/home/oncall',
							query:{
								callPhone: data.dst
							}
						})
						bus.$emit('hideEvent', true)
					}
				}else if(code == 1){
					// console.log('分机号错误');
				}
			});
		},
        phoneSwitch (params) {//调入置忙接口
			pxbPhoneSwitch (params).then(res => {
				let code = res.data.code;
				if(code == 0){
					this.$message({
						message: '操作成功!'
					})
				}else if(code == 1){
					this.$message({
						message: '分机号码错误!'
					})
				}else if(code == 2){
					this.$message({
						message: '队列号码错误!'
					})
				}else if(code == 3){
					this.$message({
						message: '操作失败!'
					})
				}else if(code == 4){
					this.$message({
						message: '分机队列不匹配!'
					})
				}
				
			});
		},
		phoneCallback (params) { //调入呼出电话接口(立即回拨)
			pxbPhoneCallback (params).then(res => {
				let code = res.data.code;
				if(code == 0){
					this.$router.push({
						path: '/home/oncall',
						query: {
							callPhone: this.callPhone
						}
					})
					bus.$emit('hideEvent', true)
				}else if(code == 1){
					this.$message({
						message: '分机号错误!'
					})
				}else if(code == 2){
					this.$message({
						message: '被叫号错误!'
					})
				}
				else if(code == 3){
					this.$message({
						message: '呼叫失败!'
					})
				}
			});
		},
		pxbPhoneQuitList(params){//退出登录时调用分机退出队列接口
			pxbPhoneQuitList (params).then(res => {
				let code = res.data.code;
				if(code == 0){
					//console.log('退出对列')
					this.$router.push({
						path: '/'
					})
					sessionStorage.removeItem('userInfo')
					sessionStorage.removeItem('dictionaryValue')
					sessionStorage.removeItem('queue')
					sessionStorage.removeItem('paused')
					sessionStorage.removeItem('device')
					sessionStorage.removeItem('phoneAmount')
				}else if(code == 1){
					//console.log('分机号错误');
				}else if(code == 2){
					//console.log('工号错误！')
				}else if(code ==3){
					//console.log('分机未加入队列！')
				}
			});
		},
		searchPhoneState(){ //封装状态查询接口,方便created间隔调用,if判断可以去掉,
			let params ={
				device: sessionStorage.getItem('device')
			}
			this.phoneState(params);	  	
		},
		phoneSwitchBusyFree(){ //将队列号分机号码存到session中,通过接口中paused的值判断显示置闲置忙的文字
			let params ={
				device: sessionStorage.getItem('device'),
				queue: sessionStorage.getItem('queue')
			}
			this.phoneSwitch(params);
			let pausedCode = sessionStorage.getItem('paused');
			if(pausedCode == 0){
				this.paused = "置闲"
			}else if(pausedCode == 1){
				this.paused ="置忙"
			}
		},
		onCallOut(){ //点击呼出电话调用接口phoneCallback拨打出电话
			let params = {
				device: sessionStorage.getItem('device'),
				called: this.callPhone
			}
			//console.log(this.callPhone)
			this.phoneCallback (params)
		},
    }
};
</script>
<style scoped="">
	.gm_headerbox{background: url("../../static/image/top_navbg.jpg") repeat;}
	.el-menu {float:right;background:transparent !important;border-right:0 !important;}
	.el-menu-item,.el-menu-item li{position:relative;display:block;float:left;color:#fff;background:transparent !important;}
	.el-menu--horizontal>.el-menu-item.is-active{color:#de2b39 !important;border-bottom-color:transparent !important;background:transparent !important;font-weight:bold;}
	.onCallLine{background:transparent !important;border-bottom-color:transparent !important;}
    .redTips{position:absolute;top:58px;left:30px;line-height:24px;color:#f56c6c;font-size:12px;}
</style>
